<template>
  <view class="container">
    <view class="f ac xb bgf pd30 fs40r fw9">
      <view>训练计划</view>
      <view>离散周期</view>
    </view>
    <view class="mt30r pd30 bgf">
      <view v-for="i in List">
        <div v-if="  i.title==='热身激活'">
          <view class="f ac xb mt20r">
            <view class="title">{{ i.title }}</view>
            <view class="add" @click="add(i)">添加动作</view>
          </view>
          <view class="f ac xb mt30r plan" @click="edit" v-for="item in i.arr">
            <view>{{ item.title }}</view>
            <view>{{ item.detail }}</view>
          </view>
        </div>
        <div v-else-if="i.title==='正式训练'">
          <view class="f ac xb mt20r">
            <view class="title" style="background-color: #F1FCF7;color: #63D09B">{{ i.title }}</view>
            <view class="add" @click="add(i)">添加动作</view>
          </view>
          <view class="f ac xb mt30r plan" @click="edit" v-for="item in i.arr">
            <view>{{ item.title }}</view>
            <view>{{ item.detail }}</view>
          </view>
        </div>
        <div v-else-if="i.title==='放松拉伸'">
          <view class="f ac xb mt20r">
            <view class="title" style="background-color: #F4F1F4;color: #A385A1">{{ i.title }}</view>
            <view class="add" @click="add(i)">添加动作</view>
          </view>
          <view class="f ac xb mt30r plan" @click="edit" v-for="item in i.arr">
            <view>{{ item.title }}</view>
            <view>{{ item.detail }}</view>
          </view>
        </div>
      </view>

    </view>
    <u-modal :show="show" :title="title" @confirm="confirm">
      <div class="cn f xb" style="height: 500rpx">
        <div class='mb10r f ac'> 动作名称：
          <u-input placeholder="请输入动作名称"></u-input>
        </div>
        <div class='mb10r f ac'> 动作组次：
          <u-input placeholder="请输入动作组次"></u-input>
        </div>
        <div class='mb10r f ac'> 动作重量：
          <u-input placeholder="请输入动作重量"></u-input>
        </div>
        <div class='mb10r f ac'> 重复次数：
          <u-input placeholder="请输入重复次数"></u-input>
        </div>
        <div class='mb10r f ac'> 间隔时长：
          <u-input placeholder="请输入间隔时长"></u-input>
        </div>
      </div>
    </u-modal>
  </view>
</template>

<script>
import {planDetails} from '../../api/fit'
export default {
  data() {
    return {
      show: false,
      title: "添加动作",
      id:'',
      List: [
        {
          title: "热身激活",
          arr: [
            {
              title: "哑铃负重踩箱",
              detail: "5组X5次|100KG|间休30秒",
            },
            {
              title: "杠铃颈后箱蹲",
              detail: "5组X5次|100KG|间休30秒",
            },
          ],
        },
        {
          title: "正式训练",
          arr: [
            {
              title: "哑铃负重踩箱",
              detail: "5组X5次|100KG|间休30秒",
            },
            {
              title: "杠铃颈后箱蹲",
              detail: "5组X5次|100KG|间休30秒",
            },
          ],
        },
        {
          title: "放松拉伸",
          arr: [
            {
              title: "哑铃负重踩箱",
              detail: "5组X5次|100KG|间休30秒",
            },

          ],
        },
      ],
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log(options,'options');
    this.id = options.id
    // 初始化当前选中的标签
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    // this.$refs.paging.reload();
  },
  /**
   * 生命周期函数--监听页面的卸载
   */
  onUnload() {
    // 卸载全局事件订阅
    uni.$off("syncRefresh");
  },

  methods: {

    async getInfo(){
      const res = await planDetails(this.id)
      console.log(res,'res');
    },
    add(i) {
      this.show = true;
    },
    confirm() {
      this.show = false
    },
    edit() {
      uni.navigateTo({
        url: "/pages/plan/setting",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background: #f4f4f4;
}

.pd30 {
  padding: 30rpx;
}

.title {
  background: #fef7eb;
  padding: 10rpx 30rpx;
  color: #f3ae3f;
  border-radius: 30rpx;
}

.add {
  padding: 10rpx 30rpx;
  color: #000;
  border-radius: 30rpx;
  border: 1px solid #000;
}

.plan {
  background: #f4f4f4;
  padding: 30rpx;
  // width: 100%;
}
</style>
